<%--
  Created by IntelliJ IDEA.
  User: 无论 而且
  Date: 2023/4/13
  Time: 16:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Title</title>
  <style>
    #box{
      width: 300px;
      height: 40px;
      position: relative;
    }
    #password{
      width: 300px;
      height: 30px;
    }
    #box div{
      width: 20px;
      height: 20px;
      position: absolute;
      background: url(../img/icon_1.png) no-repeat;
      top: 7px;
      right: 10px;
    }
    #box div.hover{
      background: url(../img/icon_2.png) no-repeat;
    }
  </style>


</head>
<body>
<div id="box">
  <div id="img"></div>
  <input type="password" name="" id="password">
</div>
<script>
  var img = document.querySelector('#img');
  var input = document.querySelector('#password');
  var flag = false;
  img.onclick = function(){
    flag = !flag;
    if(flag){
      this.className = 'hover';
      input.type = 'text';
    }else{
      this.className = '';
      input.type = 'password';
    }
  }
</script>


</body>
</html>
